<template>

  <div>
    <el-dialog :model-value="visible" title="新增角色" width="500" :close-on-click-modal="false" @close="cls">

      <el-form label-width="80" :model="role" :rules="rules" ref="formRef">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="role.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>

        <el-form-item label="角色说明">
          <el-input v-model="role.note" placeholder="请输入角色说明"></el-input>
        </el-form-item>

        <el-form-item label="授权">
          <el-tree class="tree" ref="treeRef" :data="data" show-checkbox default-expand-all node-key="id"
            :props="defaultProps" />
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="role.status">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <el-button @click="save">保存</el-button>
    </el-dialog>

  </div>

</template>

<script setup>
import { ref,onMounted } from 'vue'
import { updateRole } from '@/api/sys/role.js'
import { ElMessage } from "element-plus";
import { menuTree } from '@/api/sys/menu.js'
import { queryRoleMenu } from '@/api/sys/roleMenu.js'
//属性

///定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    dufault: false
  }
})

//角色对象
const role = ref({
  name: '',
  note: '',
  status: 1,
  menu: []
})

//菜单树
const data = ref([])
//菜单树引用
const treeRef = ref(null)
//菜单树属性
const defaultProps = {
  children: 'children',
  label: 'menuName',
}

//表单引用
const formRef = ref(null)
//验证规则
const rules = ref({
  name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
})



//方法

//定义事件
const emit = defineEmits(["close"])

//关闭事件
let cls = () => {
  emit("close")
  //通知父组件刷新数据
  emit("refresh");
}

//初始方法
function init(data) {
  role.value = data;
  queryRm()
}
///暴露方法
defineExpose({ init });

//菜单树
let initData = async () => {
  let res = await menuTree()
  if (res.code == 200) {
    data.value = res.data
    
  }
}

//查询角色权限 (菜单id)
let queryRm = async() => { 
  let res = await queryRoleMenu(role.value.id)
  if (res.code == 200) {
    //设置选中
    treeRef.value.setCheckedKeys(res.data);
  }
}

//获取选中的菜单id列表
let getMenu = () => {
  //全选的菜单
  let all = treeRef.value.getCheckedKeys()
  //半选的菜单
  let half = treeRef.value.getHalfCheckedKeys()

  let menu = []
  all.forEach(id => {
    let tmp = {}
    tmp.menuId = id
    tmp.isHalf = 0 //全选
    menu.push(tmp)
  })
  half.forEach(id => {
    let tmp = {}
    tmp.menuId = id
    tmp.isHalf = 1 //全选
    menu.push(tmp)
  })
  role.value.menu = menu
}

//保存方法
let save = async () => {

  getMenu();

  //调用表单校验 异步的
  let valid = await formRef.value.validate(valid => { })
  if (!valid)
    return;

  let res = await updateRole(role.value)
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    //通知父组件刷新数据
    emit("refresh");
    cls();
  }
}

//生命周期函数
onMounted(() => {
  initData()
})
</script>

<style scope>

* {
  padding: 0;
  margin: 0;
}

.tree {
  border: 1px solid #ddd;
  width: 400px;
  min-height: 200px;
  max-height: 300px;
  overflow-y: scroll;
}
</style>